<template>
  <el-dialog :visible="isShow" @close="closeFn">
    <el-form
      ref="form"
      :model="formData"
      status-icon
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="权限名称" prop="title">
        <el-input v-model.trim="formData.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限标志" prop="code">
        <el-input v-model.trim="formData.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="权限描述" prop="description">
        <el-input v-model.trim="formData.description" type="textarea" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row>
        <el-col>
          <el-button
            size="small"
            type="primary"
            @click="confirmFn"
          >确定</el-button>
          <el-button size="small" @click="closeFn">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addPermission, getPermission, editPermission } from '@/api/permission'
export default {
  props: {
    isShow: { type: Boolean, required: true }
  },
  data() {
    const checkTitle = async(rule, value, callback) => {
      const { data } = await getPermission() // 获取所有权限列表
      let titleList = data.filter(item => item.pid == this.formData.pid && item.id !== this.formData.id) // 筛选出同级
      console.log('同级的所有', titleList)
      let result
      if (this.formData.id) {
        // 编辑状态
        titleList = titleList.filter(item.id !== this.formData.id)
        result = titleList.some(item => item.title === value)
      } else {
        // 新增状态
        result = titleList.some(item => item.title === value)
      }
      if (result) {
        callback(new Error('权限名称已存在！'))
      } else {
        callback()
      }
    }
    const checkCode = async(rule, value, callback) => {
      let { data } = await getPermission() // 获取所有权限列表

      let result
      if (this.formData.id) {
        data = data.filter(item => item.id !== this.formData.id)
        // 有id 是编辑 ，在校验时排除自己
        result = data.some(item => item.code === value)
      } else {
        // 无id 是新增
        result = data.some(item => item.code === value)
      }
      result ? callback(new Error('权限标志不能重复！')) : callback()
    }
    return {

      rules: {
        title: [{ required: true, message: '权限标题不能为空', trigger: 'blur' },
          { validator: checkTitle, trigger: 'blur' }
        ],
        code: [{ required: true, message: '权限标志不能为空', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }],
        description: [{ required: true, message: '权限描述不能为空', trigger: 'blur' }]
      },
      formData: {
        title: '', // 权限标题
        code: '', // 标志
        description: '', // 描述
        pid: '0' // 上级id，
      }
    }
  },
  methods: {
    // 确认按钮
    async confirmFn() {
      // 表单校验
      await this.$refs.form.validate()
      // 先通过id判断是编辑还是新增，编辑有id，新增无id
      if (this.formData.id) { // 编辑状态
        await editPermission(this.formData)
      } else {
        // 再判断是新增一级权限还是二级权限
        console.log(this.formData.pid)
        if (this.formData.pid === '0') {
          // 新增的是一级权限
          console.log('一级权限', this.formData)
          this.formData.type = '1'
        } else {
          // 新增的是二级权限
          this.formData.type = '2'
          console.log('这是有pid，二级', this.formData)
        }
        await addPermission(this.formData)
      }

      // 更新列表
      this.$emit('update')
      // 关闭弹框
      this.closeFn()
    },
    // 关闭弹框
    closeFn() {
      this.$emit('update:isShow', false)
      this.formData = {
        title: '', // 权限标题
        code: '', // 标志
        description: '', // 描述
        pid: '' // 上级id，
      }
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style>

</style>
